<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;"/>
<title></title>
<style type="text/css">*{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{background-color:#ffffff;margin:0px;}canvas{display:block;position:absolute;}.container{width:auto;text-align:center;background-color:#ff0000;}</style>
</head>
<body onload="init()">
<script src="js/Vector2.js"></script>
<script src="js/ShipMovingTouch.js"></script>
<script>

var canvas,
 	c, 
	container, 
	halfWidth, 
	halfHeight,
	leftTouchID = -1, 
	leftTouchPos = new Vector2(0,0),
	leftTouchStartPos = new Vector2(0,0),
	leftVector = new Vector2(0,0); 
"use strict";
    window.addEventListener("load", function(event) {
      var status = document.getElementById("status");
      var url = document.getElementById("url");
      var open = document.getElementById("open");
      var socket;

      status.textContent = "Not Connected";
      url.value = "ws://192.168.43.210:8080";

      open.addEventListener("click", function(event) {
        open.disabled = true;
        socket = new WebSocket(url.value, "echo-protocol");

        socket.addEventListener("open", function(event) {
          status.textContent = "Connected";
          document.getElementById("main").style.display = "none"; // hide body div tag

 	 	          setupCanvas();
          var mouseX, mouseY, 
	// is this running in a touch capable environment?
	touchable = 'createTouch' in document,
	touches = [], // array of touch vectors
	ship = new ShipMoving(halfWidth, halfHeight);
	
setInterval(draw, 1000/35); 


if(touchable) {
	canvas.addEventListener( 'touchstart', onTouchStart, false );
	canvas.addEventListener( 'touchmove', onTouchMove, false );
	canvas.addEventListener( 'touchend', onTouchEnd, false );
	window.onorientationchange = resetCanvas;  
	window.onresize = resetCanvas;  
} else {
	
	canvas.addEventListener( 'mousemove', onMouseMove, false );
}

function resetCanvas (e) {  
 	// resize the canvas - but remember - this clears the canvas too. 
  	canvas.width = window.innerWidth; 
	canvas.height = window.innerHeight;
	
	halfWidth = canvas.width/2; 
	halfHeight = canvas.height/2;
	
	//make sure we scroll to the top left. 
	window.scrollTo(0,0); 
}


function draw() {
  	
	c.clearRect(0,0,canvas.width, canvas.height); 

	ship.targetVel.copyFrom(leftVector);
	ship.targetVel.multiplyEq(0.2);
	/*		c.font="30px Tahoma";
			c.fillText("Move",60,window.innerHeight/2-100);
			c.font="30px Tahoma";
			c.fillText("Fire",window.innerWidth-120,window.innerHeight/2-100);
				c.beginPath(); 
				c.strokeStyle = "cyan"; 
				c.lineWidth = 6; 
				c.arc(halfWidth/2, window.innerHeight/2, 60,0,Math.PI*2,true); 
				c.stroke();
					c.beginPath(); 
					c.strokeStyle = "blue"; 
					c.lineWidth = 6; 
					c.arc(window.innerWidth-halfWidth/2, window.innerHeight/2, 60,0,Math.PI*2,true); 
					c.stroke(); 
*/

	if(touchable) {
	
		for(var i=0; i<touches.length; i++) {	
			var touch = touches[i]; 	
			if(touch.identifier == leftTouchID){	
			continue;
				
			} else {
				c.beginPath(); 				
				c.fillStyle="cyan";
				c.rect(0,0,canvas.width, canvas.height); 
				c.fill();

		}
	}
}
}

function onTouchStart(e) {
 
	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		if((leftTouchID<0) && (touch.clientX<halfWidth))
		{
			if((touch.clientY<halfHeight) && (touch.clientX<halfWidth/2+halfWidth/4) && (touch.clientX>halfWidth/4)) socket.send("1");
			if((touch.clientY>halfHeight) && (touch.clientX<halfWidth/2+halfWidth/4) && (touch.clientX>halfWidth/4)) socket.send("2");
			if((touch.clientX<halfWidth/2) && (touch.clientY<halfHeight+halfHeight/2) && (touch.clientY>halfHeight/2)) socket.send("3");
			if((touch.clientX>halfWidth/2) && (touch.clientY<halfHeight+halfHeight/2) && (touch.clientY>halfHeight/2)) socket.send("4");
			continue; 		
		} else {
			
		socket.send("5");
			
		}	
	}
	touches = e.touches; 
}
 
function onTouchMove(e) {
	e.preventDefault();
	
	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		if(leftTouchID == touch.identifier)
		{

	}
	
	touches = e.touches; 
	}
} 
 
function onTouchEnd(e) { 
   
   	touches = e.touches; 

	for(var i = 0; i<e.changedTouches.length; i++){
		var touch =e.changedTouches[i]; 
		if(leftTouchID == touch.identifier)
		{	socket.send("6");
			break; 		
		}	
		else {socket.send("7");}
			break; 		
			
	}
   
}

function setupCanvas() {
	
	canvas = document.createElement( 'canvas' );
	c = canvas.getContext( '2d' );
	container = document.createElement( 'div' );
	container.className = "container";

	document.body.appendChild( container );
	container.appendChild(canvas);	

	resetCanvas(); 
	
	c.strokeStyle = "#ffffff";
	c.lineWidth =2;	
}
        });
        socket.addEventListener("error", function(event) {
          message.textContent = "Error: " + event;
        });
      });
    });


</script>
</body>
	<div id="main">
  Status: <span id="status"></span><br />
  URL: <input id="url" /><br />
	  <input id="open" type="button" value="Connect" />&nbsp;
	</html>
